.player-bar {
  position: fixed;
  // bottom: 0;
  // opacity: 1;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25rpx;
  padding-bottom: 10rpx;
  height: 80rpx;
  background-color: #ffffffee;
  z-index: 1111;
  transition: all 400ms;
  transition-delay: 300ms;

  .song {
    display: flex;
    align-items: center;
  }

  .bg {
    position: absolute;
    bottom: 16rpx;
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background-image: linear-gradient(155deg, #000, #000 35%, rgb(71, 59, 59) 50%, #000 65%, #000);
    font-size: 0;

    &.play {
      animation: roll 10s linear infinite;
    }

    .song-img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 47rpx;
      height: 47rpx;
      border-radius: 50%;
    }
  }

  .song-name {
    display: -webkit-box; /* 开启-webkit-box */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    width: 500rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 90rpx;
    font-size: 24rpx;
    color: #333;
  }

  .ctrl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    width: 100rpx;

    .iconfont{
      font-size: 40rpx;
      color: #ccc;
    }
  }
}

@keyframes roll {
  100% {
    transform: rotate(360deg);
  }
}